<template>
  <div > 
      <!--创建dome容器-->
      <div id="mapDiv" style="position:absolute;width:100%; height:100%;z-index:1"></div>
      <div  style="position:absolute;z-index:2;float:left" class="b" >
        <a-button @click="$router.back(-1)" style="margin-right: 8px"  type="primary">关闭</a-button>
        <br /><br /><br /><br /><br /><br /> 
          <a-card title="地块总预览" 
                  :bordered="false" 
                  style="width: 300px" 
                  :style="{'background':backgroundColor,'opacity':opacity,'color':color}" 
                  :headStyle="{color:'#FFFFFF'}">

            <p>地块总数:   {{landname}}</p>
            <p>地块总面积(m²):   {{area}}</p>
            
          </a-card>     
      </div>  
  </div>
  
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'

  export default {
    data() {
      //这里存放数据
      return {
        backgroundColor: '#191919',
        opacity: '0.8',
        color: '#FFFFFF',
        points: '',
        landname: '',
        area: 0.0,
        // ren: '',
        // tel: '',
        // createtime: '',
          // cityName:"" , //暂存城市名称
        url: {
          list: "/fly/axhkLandManagement/list",
          // list0: "/fly/axhkLandManagement/getAllMassifname",
          list1: "/fly/axhkWorkManagement/getLatitude", 
          list2: "/fly/axhkLandManagement/getallmap",        
        },
      };
    },
    created() {      
    },
     //生命周期 - 在挂载完成（可以访问DOM元素）
    mounted() {
      this.onLoad()
    },
    methods: {
      onLoad(){
        let that=this  //将方法放在mounted，会有指向问题，定义this使用就会正常
        that.huatu(); 

        let zoom = 12; //地图的初始化级别，及放大比例
        that.map = new T.Map("mapDiv");  //初始化地图对象 
        that.map.centerAndZoom(new T.LngLat(109.063332, 34.270990), zoom); //地图的初始化中心点，此为西安的经纬度
       
        //定义一个图层类型的控件
        var ctrl = new T.Control.MapType();
        //添加图层控件
        that.map.addControl(ctrl); 
        // 设置地图位地星混合图层
        that.map.setMapType(window.TMAP_HYBRID_MAP);
        //允许鼠标滚轮缩放地图
        that.map.enableScrollWheelZoom();
        //创建比例尺控件对象
        var scale = new T.Control.Scale();
        //添加比例尺控件
        that.map.addControl(scale);
        //定义一个鹰眼控件
        var miniMap = new T.Control.OverviewMap({
            isOpen: true,
            size: new T.Point(150, 150)
        });
        //添加鹰眼控件
        that.map.addControl(miniMap);
        // //定义一个标绘控件
        // var military = new T.Control.militarySymbols({ position: T_ANCHOR_TOP_LEFT});
        // //向地图上增加标绘控件
        // that.map.addControl(military);        
         
      },

      huatu(){ 
        let name=this.$route.query.landName 
            // alert(JSON.stringify(name))
         getAction(this.url.list).then((res)=>{
            if(res.success){
                // this.landname=res.result.records
              this.landname=res.result.total
            
              // alert(JSON.stringify(this.landname))
            } 
          }); 

          getAction(this.url.list2).then((res)=>{
            if(res.success){           
              var map=res.result
              // alert(JSON.stringify(map))
               var sum = 0;
            for (var i = 0; i < map.length; i++) {
        　　　　let name=map[i].massif_name;
                sum += parseFloat(map[i].land_area);
                // sum += map[i].land_area;
                this.area=sum.toFixed(2)
                // alert(JSON.stringify(this.area))
                 getAction(this.url.list1,{massifname:name}).then((res)=>{
                    if(res.success){
                      //  this.points =res.result; 
                      this.$set(this,'points',res.result)
                      // alert(JSON.stringify(this.points[0][0].lat)); 

                    //path : 多坐标点数组 ，格式：[{lng:'',lat:''},{lng:'',lat:''},{lng:'',lat:''}]
                    //{x代表lng:'经度',  y代表lat:'纬度'}
                    //把多边形的中心点设置成地图的中心点，开始吧
                  //     var path =this.points[0]
                  //     var x = 0.0;
                  // 　　var y = 0.0;
                  // 　　for (var i = 0; i < path.length; i++) {
                  // 　　　　x = x + parseFloat(path[i].lng);
                  // 　　　　y = y + parseFloat(path[i].lat);
                  // 　　}
                  // 　　x = x / path.length;
                  // 　　y = y / path.length;
                      // alert(x)
                      // alert(y)
                      // let zoom =14;
                      //动态获取中心点坐标
                      // this.map.centerAndZoom(new T.LngLat(x,y));
                      // this.map.centerAndZoom(new T.LngLat(this.points[0][0].lng, this.points[0][0].lat),zoom);
                      //动态获取缩放比例，根据提供的坐标点数组设置地图视野，调整后的视野会保证包含提供的坐标点。
                      // this.map.setViewport(path);  
                      
                        //创建面对象
                        let polygon = new T.Polygon(this.points, {
                              color: "blue",
                              weight: 3,
                              opacity: 0.5,
                              fillColor: "#FFFFFF",
                              // fillColor: "#191919",
                              fillOpacity: 0.5
                          }); 
                          // this.map.getViewport(polygon) 
                      //向地图上添加面
                      this.map.addOverLay(polygon); 
                  
                      }
                    }); 
                }                         
            } 
          }); 
        //  getAction(this.url.list0,{massifname:name}).then((res)=>{
        //     if(res.success){
        //       this.landname=res.result[0].massif_name
        //       this.ren=res.result[0].massif_master_name
        //       this.tel=res.result[0].massif_master_telephone
        //       this.area=res.result[0].land_area
        //       this.createtime=res.result[0].create_time
        //       // alert(this.landname)
        //       // alert(JSON.stringify(this.landname))
        //     } 
        //   }); 
        
        
      }
    }
  }

</script>
